<template>
  <div class="activity">
    <header>
      <webHader
        :title="$t('courseIndex.title')"
        :crumbs="$t('courseIndex.crumbs')"
        :backgroundImageUrl="headerBg"
      />
    </header>
    <div>
      <div class="content" v-loading="loading">
        <el-tabs
          v-model="activeName"
          class="race-tabs"
          @tab-change="handleChange"
        >
          <el-tab-pane
            v-for="item in courseList"
            :key="item.id"
            :name="item.id"
            :label="item.courseName"
          >
              <div class="course-list">
                <div class="course-list-item" v-for="item in dataList">
                  <div class="course-list-item-img">
                    <img :src="item.promotionalImages[0]" alt="" />
                    <span class="course-list-item-img-name">
                      <!-- 课程类型(1|团体课，2|私教课，3|体验课，4|临时课) -->
                       {{  computeCourseTypeLabel(item.courseType)  }}
                    </span>
                  </div>
                  <div class="course-list-item-title">
                    {{ item.courseName }}
                  </div>
                  <div class="course-list-item-content">
                    {{ item.courseFeatures }}
                  </div>
                  <div class="learnMore" @click="goDetail(item)">{{ $t('courseIndex.learnMore') }}</div>
                </div>
              </div>
              <Empty v-if="!dataList || !dataList.length" :title="$t('courseIndex.noData')" />
          </el-tab-pane>

          <Pagination
            :background="true"
            :total="total"
            :current-page.sync="pageNum"
            :page-size.sync="pageSize"
            @pagination-change="paginationChange"
            class="pagination"
          />
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import headerBg from "~/assets/web/activity-header-bg.png";
const activeName = ref(1);
const courseList = ref([]);
import { GetCourseList } from "~/apis/web";
const loading = ref(false);
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(10);
const dataList = ref([]);
const { $navigate } = useNuxtApp();
const { t } = useI18n();
const { computeCourseTypeLabel } = useCourseLabel()

const paginationChange = (val) => {
  pageNum.value = val.currentPage;
  pageSize.value = val.pageSize;
  getLists();
};

const init = () => {
  let arr = [
    {
      courseName: t('courseDetail.typeGroup'),
      id: 1,
    },
    {
      courseName: t('courseDetail.typePrivate'),
      id: 2,
    },
    {
      courseName: t('courseDetail.typeTrial'),
      id: 3,
    },
    {
      courseName: t('courseDetail.typeTemporary'),
      id: 4,
    },
  ];
  courseList.value = arr;
  activeName.value = arr[0].id;
};

// 监听语言变化，重新初始化课程类型
watch(() => t('courseDetail.typeGroup'), () => {
  init();
}, { immediate: true });

const handleChange = (e) => {
  activeName.value = e;
  getLists();
};

const getLists = async () => {
  loading.value = true;
  dataList.value = [];
  let params = {
    pageNo: pageNum.value,
    pageSize: pageSize.value,
    courseType: activeName.value,
  };
  await GetCourseList(params)
    .then((res) => {
      if (res.code == 0) {
        dataList.value = res.data.list;
        total.value = Number(res.data?.total) || 0
        loading.value = false;
      }
    })
    .catch((err) => {
      dataList.value = [];
      loading.value = false;
    });
};

getLists();

const goDetail = (item) => {
  $navigate(`/web/courses/${item.id}`);
};
</script>

<style>
.race-tabs .el-tabs__nav-wrap:after {
  content: none !important;
}

.race-tabs .el-tabs__item {
  font-family: PingFang HK, PingFang HK;
  font-weight: 500;
  font-size: 16px;
  color: rgba(30, 32, 33, 0.7);
}

.race-tabs .el-tabs__item.is-active,
.el-tabs__item:hover {
  font-family: PingFang HK, PingFang HK;
  font-weight: 500;
  font-size: 16px;
  color: #1e2021;
}

.race-tabs .el-tabs__active-bar {
  /* background: #EC4613; */
  background: var(--theme-gradient-bg);
}
</style>

<style lang="less" scoped>
.activity {
  width: 100%;

  .content {
    width: 100%;
    margin: 0 auto;
    padding: 30px 106px 0 106px;
    box-sizing: border-box;
    .course-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, 292px);
      gap: 20px;
      width: 100%;
      justify-content: left;

      .course-list-item {
        background: #ffffff;
        border-radius: 0px 0px 0px 0px;
        cursor: pointer;
        padding-bottom: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;

        .course-list-item-img {
          width: 100%;
          height: 220px;
          position: relative;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .course-list-item-img-name {
            background: rgba(0, 0, 0, 0.5);
            border-radius: 0px 0px 0px 0px;
            font-family: PingFang HK, PingFang HK;
            font-weight: 400;
            font-size: 12px;
            color: #ffffff;
            letter-spacing: 1px;
            text-align: center;
            padding: 10px;
            box-sizing: border-box;
            position: absolute;
            bottom: 10px;
            right: 22px;
          }
        }

        .course-list-item-title {
          font-family: PingFang HK, PingFang HK;
          font-weight: 600;
          font-size: 16px;
          color: #1e2021;
          line-height: 33px;
          text-align: left;
          padding: 0 20px;
          margin: 20px 0;
          box-sizing: border-box;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .course-list-item-content {
          font-family: PingFang HK, PingFang HK;
          font-weight: 400;
          font-size: 14px;
          color: #000000;
          line-height: 20px;
          text-align: left;
          padding: 0 20px;
          margin-bottom: 20px;
          box-sizing: border-box;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .learnMore {
          width: 135px;
          border-radius: 0px 0px 0px 0px;
          border: 1px solid #1e2021;
          font-family: PingFang HK, PingFang HK;
          font-weight: 600;
          font-size: 14px;
          color: #1e2021;
          padding: 10px 0;
          text-align: center;
          box-sizing: border-box;
          cursor: pointer;
          margin: auto auto 0;
        }
      }
    }
  }

  .pagination {
    width: 100%;
    padding: 0px 0 30px 50px;
    box-sizing: border-box;

    :deep(.el-pagination) {
      justify-content: flex-start;
    }

    :deep(.el-pager li:hover) {
      color: #1d1b1b !important;
    }

    :deep(.is-active) {
      background-color: #1d1b1b !important;
    }

    :deep(.el-pager .is-active:hover) {
      color: #ffffff !important;
    }
  }
}
</style>
